<template>
	<view>
		<uni-list-item title="头像" >
			<view class="flex align-center" slot="right"@click="changeUserpic">
				<image :src="demo.userpic"
				style="width: 100rpx;height: 100rpx;"
				class="rounded-circle"></image>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<uni-list-item title="昵称">
			<view class="flex align-center" slot="right">
				<input class="uni-input text-right" v-model="username" />
				<text class="iconfont icon-bianji1 ml-2">{{demo.username}}</text>
			</view>
		</uni-list-item>
		<uni-list-item title="性别" @click="changeSex">
			<view class="flex align-center" slot="right">
				<text>{{demo.sex}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<picker mode="date" :value="birthday" @change="onDateChange">
			<uni-list-item title="生日">
				<view class="flex align-center" slot="right">
					<text>{{demo.birthday}}</text>
					<text class="iconfont icon-bianji1 ml-2"></text>
				</view>
			</uni-list-item>
		</picker>
		<uni-list-item title="情感" @click="changeEmotion">
			<view class="flex align-center" slot="right">
				<text>{{demo.emotionText}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<uni-list-item title="职业" @click="changeJob">
			<view class="flex align-center" slot="right">
				<text>{{demo.job}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		<uni-list-item title="家乡" @click="showCityPicker">
			<view class="flex align-center" slot="right">
				<text>{{demo.pickerText}}</text>
				<text class="iconfont icon-bianji1 ml-2"></text>
			</view>
		</uni-list-item>
		
		<view class="py-2 px-3">
			<button class="bg-main text-white" style="border-radius: 50rpx;border: 0;" type="primary" @click="submit()">完成</button>
		</view>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	const sexArray = ['保密', '男', '女']
	const emotionArray = ['保密', '未婚', '已婚']
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				demo:[],
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				userpic:"../static/default.jpg",
				username:"",
				sex:'',
				emotion:'',
				job:"保密",
				birthday:"2000-10-16"
			}
		},
		onLoad() {
			this.getdata()
		},
		computed: {
			// ...mapState({
			// 	user:state=>state.user
			// }),
			sexText() {
				return sexArray[this.sex]
			},
			emotionText(){
				return emotionArray[this.emotion]
			}
		},
		// 监听返回
		onBackPress() {
		  if (this.$refs.mpvueCityPicker.showPicker) {
		  	this.$refs.mpvueCityPicker.pickerCancel();
		    return true;
		  }
		},
		// 监听页面卸载
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		methods: {
			
			showCityPicker(){
				this.$refs.mpvueCityPicker.show()
			}, 
			changeUserpic(){
				uni.chooseImage({
					count:1,
					sizeType:["compressed"],
					sourceType:["album","camera"],
					success: (res) => {
						this.userpic=res.tempFilePaths[0]
						console.log(this.userpic)
					}
				})
			},
			// 三级联动提交事件
			onConfirm(e) {
				this.pickerText = e.label
			},
			// 修改生日
			onDateChange(e){
				this.birthday = e.detail.value
			},
			// 修改性别
			changeSex(){
				uni.showActionSheet({
				    itemList: sexArray,
				    success:(res)=>{
				        this.sex =sexArray[res.tapIndex]
				    }
				});
			},
			// 修改情感
			changeEmotion(){
				uni.showActionSheet({
				    itemList: emotionArray,
				    success:(res)=>{
				        this.emotion = emotionArray[res.tapIndex]
				    }
				});
			},
			// 修改职业
			changeJob(){
				let JobArray = ['教师','学生']
				uni.showActionSheet({
				    itemList: JobArray,
				    success:(res)=>{
				        this.job = JobArray[res.tapIndex]
				    }
				});
			},
			async submit(){
				////////////////
				const res = await uniCloud.callFunction({
									name: 'userinformation',
									data: {
										action: 'update',
										id:this.$store.state.loginsStatus,
										username:this.username,
										userpic:this.userpic,
										sex:this.sex,
										birthday:this.birthday,
										emotionText:this.emotion,
										job:this.job,
										pickerText:this.pickerText
									}
								})
				////////////////
				// const res = await uniCloud.callFunction({
				// 	name: 'userinformation',
				// 	data: {
				// 		action: 'add',
				// 		id:this.$store.state.loginsStatus,
				// 		username:this.username,
				// 		userpic:this.userpic,
				// 		sex:this.sex,
				// 		birthday:this.birthday,
				// 		emotionText:this.emotion,
				// 		job:this.job,
				// 		pickerText:this.pickerText
				// 	}
				// })
				
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					})
				
				
				
				
				console.log(this.$store.state.loginsStatus)
				console.log(this.userpic)
				console.log(this.username)
				console.log(this.birthday)
				console.log(this.sex)
				console.log(this.emotion)
				console.log(this.job)
				console.log(this.pickerText)
			},
			async getdata(){
				
				const res = await uniCloud.callFunction({
					name: "userinformation",
					data: {
						action: 'getOne',
						id:this.$store.state.loginsStatus
					}
				})
				this.demo=res.result.data[0]
				console.log(this.demo)
			}
		}
	}
</script>

<style>

</style>
